<template>
  <div>
    <div>3D横向柱体有棱角多色渐变组件-------象型柱图</div>
    <div class="barecharts" ref="barchat1"></div>
    <div>3D横向柱体有棱角渐变组件-中间添加中间线充当棱角-------象型柱图</div>
    <div class="barecharts" ref="barchat2"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
var barWidth = 40;
export default {
  data() {
    return {
      chart: null,
      chart1: null,
      chart2:null,
      color: [
        {
          startColor: '#53C7FF',
          endColor: 'rgba(83, 199, 255, 0.1)',
          topStartColor: '#53C7FF',
          topEndColor: '#53C7FF',
          leftStartColor: '#53C7FF',
          leftEndColor: 'rgba(83, 199, 255, 0.1)',
          rightStartColor: '#53C7FF',
          rightEndColor: 'rgba(83, 199, 255, 0.1)'
        },
        {
          startColor: '#76C6C4',
          endColor: 'rgba(118, 198, 196, 0.1)',
          topStartColor: '#76C6C4',
          topEndColor: '#76C6C4',
          leftStartColor: '#76C6C4',
          leftEndColor: 'rgba(118, 198, 196, 0.1)',
          rightStartColor: '#76C6C4',
          rightEndColor: 'rgba(118, 198, 196, 0.1)'
        }
      ]
    }
  },
  mounted() {
    this.getSCE1()
    this.getSCE1_1()
    // this.getSCE2()
  },
  methods: {
    // 横向渐变
    getSCE1() {
      let seriesdata = [
        { name: "销售数量", data: [45, 25, 48, 62, 35] },
        { name: "总销售额", data: [23, 12, 52, 14, 9] },
        { name: "平均销售价格", data: [43, 12, 32, 14, 19] },
        // { name: "销售价格", data: [13, 42, 22, 34, 29] }
      ]
      let offetsdata = []//偏移点x值对称数据
      let arr = []//遍历的多组图形series数据
      let one = []//一组图形实例
      let flatarr = []//二维变一维拉平数据
      if (seriesdata.length>0){
        offetsdata = this.calc(seriesdata.length)
        seriesdata.map((item, index) => {
          one = [
              // 计划产值进度柱子
              {
                name: item.name,
                type: "bar",
                barWidth: barWidth,
                z:1,
                barGap: 0,
                itemStyle: {
                  // normal: {
                  //   opacity: 0.9,
                  //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  //     {
                  //       offset: 0,
                  //       color: "#345A8B",
                  //     },
                  //     {
                  //       offset: 0.3,
                  //       color: "#345A8B",
                  //     },
                  //     {
                  //       offset: 0.6,
                  //       color: "#387ABD",
                  //     },
                  //     {
                  //       offset: 1,
                  //       color: "#387ABD",
                  //     },
                  //   ]),
                  //   barBorderRadius: 0,
                  // },
                  color: function (params) {
                    // console.log('color', params)
                    var colorList = [
                      new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        { offset: 0, color: '#345A8B' },
                        { offset: 0.35, color: '#387ABD' },
                        { offset: 0.45, color: '#345A8B' },
                        { offset: 0.50, color: '#2ec7c9' },
                        { offset: 0.51, color: '#2ec7c9' },
                        { offset: 0.52, color: '#2ec7c9' },
                        { offset: 1, color: '#387ABD' },
                      ]),
                      new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        { offset: 0, color: '#23b7e5' },
                        { offset: 0.5, color: '#f00' },
                        { offset: 1, color: '#5ab1ef' },
                      ]),
                      new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        { offset: 0, color: '#d0648a' },
                        { offset: 0.5, color: '#fbd786' },
                        { offset: 1, color: '#f7797d' },
                      ]),
                      new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        { offset: 0, color: '#91cc75' },
                        { offset: 0.5, color: '#fac858' },
                        { offset: 1, color: '#ee6666' },
                      ]),
                    ];
                    return colorList[params.seriesIndex];
                  },
                },
                label: {
                  show: true,
                  position: 'top',
                  color: "#00f8ff",
                  fontSize: 12,
                },
                data: item.data,
              },
              // 计划产值顶部正方形
              {
                name: item.name,
                type: "pictorialBar",
                symbol: "diamond",
                symbolSize: [barWidth, 20],//20是菱形的高
                symbolOffset: [offetsdata[index], '-50%'],//10是菱形高的一半，正负号是取决于symbolPosition是start还是end,end为负，start是正
                symbolPosition: "end",
                z: 2,
                color: "#51C0DB",
                data: item.data,
              },
              //  计划产值底部正方形
              {
                name: item.name,
                type: "pictorialBar",
                symbol: "diamond",
                symbolSize: [barWidth, 20],
                symbolOffset: [offetsdata[index], '50%'],
                // symbolPosition: "end",
                z: 3,
                // color: "#161D6E",
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: "#345A8B",
                  },
                  {
                    offset: 1,
                    color: "#387ABD",
                  },
                  ]),
                },
                data: item.data,
              },
          ]
          arr.push(one)
        })
        flatarr = arr.flat()
      }
      // console.log('重组数据', arr)
      // console.log('-----', arr1.flat())
      // // 数组拉平
      
      // console.log('拉平数据', flatarr)
      // symbolOffset的X值：假设柱子宽是40
      // 如果是1组数据：x值[0],数字加起来为0
      // 如果是2组数据：x值[-20,20],数字加起来为0
      // 如果是3组数据：x值[-40,0,40],数字加起来是0
      // 如果是4组数据：x值[-60,-20,20,60],数字加起来是0
      // 如果是5组数据：x值[-80,-40,0,40,80],数字加起来是0
      // 如果是6组数据：x值[-100,-60,-20,20,60,100],数字加起来是0
      // 如果是7组数据：x值[-120,-80,-40,0,40,80,120],数字加起来是0
      
      const option = {
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        tooltip: {
          show:true,
          trigger:'axis',
          // formatter: function (params){
          //   console.log('params', params)
          // }
        },
        xAxis: {
          data: ['A', 'B', 'C','d','e'],
          // axisLabel: {
          //   inside: false,
          //   textStyle: {
          //     color: '#000'
          //   }
          // },
          z: 10
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#999'
            }
          }
        },
        series: flatarr,
      };
      this.chart1 = echarts.init(this.$refs.barchat1)
      this.chart1.setOption(option)
    },
    // 纵向渐变
    getSCE1_1() {
      let seriesdata = [
        { name: "销售数量", data: [45, 25, 48, 62, 35] },
        { name: "总销售额", data: [23, 12, 52, 14, 9] },
        { name: "平均销售价格", data: [43, 12, 32, 14, 19] },
        // { name: "销售价格", data: [13, 42, 22, 34, 29] }
      ]
      let offetsdata = []//偏移点x值对称数据
      let arr = []//遍历的多组图形series数据
      let one = []//一组图形实例
      let flatarr = []//二维变一维拉平数据
      if (seriesdata.length > 0) {
        offetsdata = this.calc(seriesdata.length)
        seriesdata.map((item, index) => {
          // console.log('遍历数据',item,index)
          one = [
            // 计划产值进度柱子
            {
              name: item.name,
              type: "bar",
              barWidth: barWidth,
              z: 1,
              barGap: 0,
              itemStyle: {
                normal: {
                  // opacity: 0.9,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#345A8B",
                    },
                    {
                      offset: 0.3,
                      color: "#345A8B",
                    },
                    {
                      offset: 0.6,
                      color: "#387ABD",
                    },
                    {
                      offset: 1,
                      color: "#387ABD",
                    },
                  ]),
                  barBorderRadius: 0,
                },
                // color: function (params) {
                //   console.log('color', params)
                //   var colorList = [
                //     new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                //       { offset: 0, color: '#345A8B' },
                //       { offset: 0.35, color: '#387ABD' },
                //       { offset: 0.45, color: '#345A8B' },
                //       { offset: 0.50, color: '#2ec7c9' },
                //       { offset: 0.51, color: '#2ec7c9' },
                //       { offset: 0.52, color: '#2ec7c9' },
                //       { offset: 1, color: '#387ABD' },
                //     ]),
                //     new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                //       { offset: 0, color: '#23b7e5' },
                //       { offset: 0.5, color: '#f00' },
                //       { offset: 1, color: '#5ab1ef' },
                //     ]),
                //     new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                //       { offset: 0, color: '#d0648a' },
                //       { offset: 0.5, color: '#fbd786' },
                //       { offset: 1, color: '#f7797d' },
                //     ]),
                //     new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                //       { offset: 0, color: '#91cc75' },
                //       { offset: 0.5, color: '#fac858' },
                //       { offset: 1, color: '#ee6666' },
                //     ]),
                //   ];
                //   return colorList[params.seriesIndex];
                // },
              },
              label: {
                show: true,
                position: 'top',
                color: "#00f8ff",
                fontSize: 12,
              },
              data: item.data,
            },
            // {
            //   name: item.name+'1',
            //   type: "bar",
            //   barWidth: 10,
            //   z: 1,
            //   zlevel:5,
            //   // barGap: 0,
            //   // barCategoryGap:-40,
            //   itemStyle: {
            //     normal: {
            //       opacity: 0.9,
            //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //         {
            //           offset: 0,
            //           color: "#f00",
            //         },
            //         {
            //           offset: 1,
            //           color: "#f00",
            //         },
            //       ]),
            //       barBorderRadius: 0,
            //     },
            //   },
            //   label: {
            //     show: true,
            //     position: 'top',
            //     color: "#00f8ff",
            //     fontSize: 12,
            //   },
            //   data: item.data,
            // },
            // {
            //   name: item.name,
            //   type: "pictorialBar",
            //   symbolSize: ['50%','100%'],
            //   symbol: "image://",
            //   symbolOffset: [offetsdata[index], 0],
            //   // symbolRepeat:true,
            //   symbolPosition: "start",
            //   z: 4,
            //   color: "#f00",
            //   data: item.data,
            // },
            // 计划产值顶部正方形
            {
              name: item.name,
              type: "pictorialBar",
              symbol: "diamond",
              symbolSize: [barWidth, 20],//20是菱形的高
              symbolOffset: [offetsdata[index], '-50%'],//10是菱形高的一半，正负号是取决于symbolPosition是start还是end,end为负，start是正
              symbolPosition: "end",
              z: 10,
              color: "#51C0DB",
              data: item.data,
            },
            //  计划产值底部正方形
            {
              name: item.name,
              type: "pictorialBar",
              symbol: "diamond",
              symbolSize: [barWidth, 20],
              symbolOffset: [offetsdata[index], '50%'],
              // symbolPosition: "end",
              z: 3,
              // color: "#161D6E",
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "#387ABD",
                },
                {
                  offset: 1,
                  color: "#387ABD",
                },
                ]),
              },
              data: item.data,
            },
            {
              name: item.name,
              type: "pictorialBar",
              symbol: "rect",
              symbolSize: [1, 1],//中间线
              symbolRepeat:true,
              symbolOffset: [offetsdata[index], 8],
              // symbolPosition: "start",
              z: 4,
              color: "#fff",
              // itemStyle: {
              //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              //     offset: 0,
              //     color: "#51C0DB",
              //   },
              //   {
              //     offset: 1,
              //     color: "#51C0DB",
              //   },
              //   ]),
              // },
              data: item.data,
            },
            // {
            //   name: item.name,
            //   type: "pictorialBar",
            //   symbol: "roundRect",
            //   symbolSize: [barWidth - 20, 0.1],
            //   symbolRepeat: true,
            //   symbolMargin:0,
            //   symbolOffset: [offetsdata[index] - 7, '50%'],
            //   symbolClip:true,
            //   // symbolPosition: "start",
            //   z: 7,
            //   // color: "#387ABD",
            //   itemStyle: {
            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //       offset: 0,
            //       color: "#f00",
            //     },
            //     {
            //       offset: 1,
            //       color: "#387ABD",
            //     },
            //     ]),
            //   },
            //   data: item.data,
            // },
            // {
            //   type: 'custom',
            //   itemStyle: {
            //     color: 'rgba(51, 154, 240,0.2)'
            //   },
            //   renderItem: function (params, api) {
            //     console.log(params, api, api.value)

            //     //获取对应类目的axisTick中心点坐标
            //     var start = api.coord([api.value(0)]);
            //     // const api1 = shape.api;
            //     // const xAxisPoint = api.coord([shape.xValue, 0]);
            //     // const p0 = [shape.x, shape.y];
            //     // const p1 = [shape.x - shape.width / 2, shape.y];
            //     // const p4 = [shape.x + shape.width / 2, shape.y];
            //     // const p6 = [shape.x + shape.width / 2 + shape.zWidth, shape.y - shape.zHeight];
            //     // const p7 = [shape.x - shape.width / 2 + shape.zWidth, shape.y - shape.zHeight];
            //     // const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
            //     // const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1] - shape.zHeight];

            //     console.log('api', start)

            //     //通过坐标系的宽度和类目数，计算单个类目的背景
            //     var width = (params.coordSys.width / 7) * 0.6;

            //     return {
            //       type: 'line',
            //       shape: {
            //         // 相对左上角坐标
            //         x: start[0] - width / 2,
            //         // x: params.coordSys.x,
            //         y: params.coordSys.y,
            //         width: 10,
            //         height: params.coordSys.height,
            //       },
            //       style: api.style()
            //     };
            //   },
            //   data: [0, 0, 0, 0, 0, 0, 0]
            // },



            // ============================================
            // {
            //   z: 1,
            //   name: item.name,
            //   type: 'bar',
            //   barWidth: barWidth,
            //   barGap: 0, //相邻柱子间距
            //   itemStyle: {
            //     normal: {
            //       opacity: 0.7,
            //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //         offset: 0,
            //         color: "#2863D2",
            //       },
            //       {
            //         offset: 1,
            //         color: "#161D6E",
            //       },
            //       ]),
            //       barBorderRadius: 0,
            //     },
            //   },
            //   data: item.data //Y轴上的高度
            // },
            // {
            //   z: 2,
            //   name: item.name,
            //   type: "pictorialBar",
            //   data: item.data,//此数据对应底部组件
            //   symbol: "diamond",//底部组件形状，不写默认为椭圆
            //   symbolOffset: [offetsdata[index], "50%"],//与柱子的偏移角度
            //   symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],//底面[宽，高]
            //   itemStyle: {
            //     normal: {
            //       color: "#161D6E",//底面左右颜色（深，浅）
            //     },
            //   },
            // },
            // {
            //   z: 3,
            //   name: item.name,
            //   type: "pictorialBar",
            //   symbolPosition: "end",
            //   data: item.data,//此数据对应顶部组件
            //   symbol: "diamond",
            //   symbolOffset: [offetsdata[index], "-50%"],
            //   symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
            //   itemStyle: {
            //     normal: {
            //       color: "#51C0DB",
            //     },
            //   },
            // },
          ]
          arr.push(one)
        })
        flatarr = arr.flat()
      }
      // console.log('重组数据', arr)
      // console.log('-----', arr1.flat())// 数组拉平

      const option = {
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        tooltip: {
          show: true,
          trigger: 'axis',
          // formatter: function (params){
          //   console.log('params', params)
          // }
        },
        xAxis: {
          data: ['A', 'B', 'C', 'd', 'e'],
          // axisLabel: {
          //   inside: false,
          //   textStyle: {
          //     color: '#000'
          //   }
          // },
          z: 10,
          axisLine:{
            show:false
          }
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#999'
            }
          }
        },
        series: flatarr,
      };
      this.chart2 = echarts.init(this.$refs.barchat2)
      this.chart2.setOption(option)
    },
    // 对称数据
    calc(group){
      const len = Math.floor(group / 2), gap = 40; 
      const result = [];
      let index = 0; 
      if(group % 2 == 0) {
        let start = -20;
        for (let i = len; i >= 1; i--) {
          result[index++] = start + gap * -(i - 1);
        }
        start = 20;
        for (let i = 1; i <= len; i++){
          result[index++] = start + gap * (i - 1);
        }
      }
      else {
        let start = 0;
        for(let i = len; i >= 1; i--){
          result[index++] = start + gap * -i;
        }
        result[index++] = 0;
        start = 0; 
        for (let i = 1; i <= len; i++) {
          result[index++] = start + gap * i;
        }
      }
      // console.log('对等数据', result)
      return result
    },
    // getSCE2() {
    //   const rgbColors = [['#FFF5EB', '#FFB56B', '#FF8D1A', '#C46200', '#FFFFFF'], ['#FF8266', '#FF8266', '#FF5733', '#D43030', '#FFFFFF'], ['#E6DBFF', '#7948EA', '#7948EA', '#3B09B0', '#FFFFFF'], ['#E0EFFF', '#61ABFF', '#2A82E4', '#0A3D78', '#FFFFFF']]
    //   const randomColors = [['#E6FAEE', '#00BAAD', '#29D6C2', '#08968D', '#FFFFFF'], ['#E5F5C4', '#A5D63F', '#A6E322', '#6C990C', '#FFFFFF'], ['#FFF9BF', '#FFC300', '#EDDB3B', '#BA9006', '#FFFFFF'], ['#FAE0FF', '#D651ED', '#DE6BF2', '#AC33C1', '#FFFFFF']]// 四位以后采取随机颜色
    //   const barWidth = 40
    //   let arr = []// 组装数据
    //   let one = []// 单个图形实例
    //   let offetsdata = []//方块x偏移数据
    //   // 假如有seriesdata有3组数据，offetsdata=[-40,0,40]
    //   if (seriesdata && seriesdata.length > 0) {
    //     seriesdata.map((item, index) => {
    //       let constDataPublic = []//底部组件值
    //       if (item.data && item.data.length > 0) {
    //         item.data.map((item) => {
    //           constDataPublic.push(1)
    //         })
    //       }
    //       offetsdata = this.calc(seriesdata.length)
    //       const currentcolor = index < 4 ? rgbColors[index] : this.randomArray(randomColors)
    //       one = [
    //         {
    //           z: 1,
    //           name: item.name,
    //           type: 'bar',
    //           barWidth: barWidth,
    //           barGap: 0, //相邻柱子间距
    //           itemStyle: {
    //             borderRadius: [0, 0, 0, 0],//柱子四周圆角
    //             color: {
    //               type: "linear",
    //               x: 0,
    //               x2: 1,
    //               y: 0,
    //               y2: 0,
    //               /* 此处决定阴暗面 若为横向柱状图则x,y轴调换
    //                 x: 0,
    //                 x2: 0,
    //                 y: 0,
    //                 y2: 1, */
    //               colorStops: [{
    //                 offset: 0,
    //                 color: currentcolor[0],
    //               },
    //               {
    //                 offset: 0.5,
    //                 color: currentcolor[0],
    //               },
    //               {
    //                 offset: 0.5,
    //                 color: currentcolor[3],
    //               },
    //               {
    //                 offset: 1,
    //                 color: currentcolor[3],
    //               },
    //               ],
    //             },//柱子左右颜色（深，浅）
    //           },
    //           data: item.data //Y轴上的高度
    //         },
    //         {
    //           z: 2,
    //           name: item.name,
    //           type: "pictorialBar",
    //           data: constDataPublic,//此数据对应底部组件
    //           symbol: "diamond",//底部组件形状，不写默认为椭圆
    //           symbolOffset: [offetsdata[index], "50%"],//与柱子的偏移角度
    //           symbolSize: [barWidth, 20],//底面[宽，高]
    //           itemStyle: {
    //             normal: {
    //               color: {
    //                 type: "linear",
    //                 x: 0,
    //                 x2: 1,
    //                 y: 0,
    //                 y2: 0,
    //                 /* 此处决定阴暗面 若为横向柱状图则x,y轴调换
    //                   x: 0,
    //                   x2: 0,
    //                   y: 0,
    //                   y2: 1, */
    //                 colorStops: [{
    //                   offset: 0,
    //                   color: currentcolor[0],
    //                 },
    //                 {
    //                   offset: 0.5,
    //                   color: currentcolor[0],
    //                 },
    //                 {
    //                   offset: 0.5,
    //                   color: currentcolor[3],
    //                 },
    //                 {
    //                   offset: 1,
    //                   color: currentcolor[3],
    //                 },
    //                 ],
    //               },//底面左右颜色（深，浅）
    //               // borderColor: colorArr1[2],
    //               // borderWidth: 2,  //加上棱角分明
    //             },
    //           },
    //           tooltip: {
    //             show: false,
    //           },
    //         },
    //         {
    //           z: 3,
    //           name: item.name,
    //           type: "pictorialBar",
    //           symbolPosition: "end",
    //           data: item.data,//此数据对应顶部组件
    //           symbol: "diamond",
    //           symbolSize: [barWidth, 20],//20是菱形的高
    //           symbolOffset: [offetsdata[index], '-50%'],
    //           itemStyle: {
    //             normal: {
    //               color: currentcolor[4]
    //             },
    //           },
    //           tooltip: {
    //             show: false,
    //           },
    //         },
    //       ]
    //       arr.push(one)
    //     })
    //   }
    //   // 数组拉平
    //   let flatarr = arr.flat()

    //   return flatarr
    // },
    /** 随机取数组元素中的值工具 */
    // randomArray(array) {
    //   var length = array.length
    //   var randomIndex = Math.floor(Math.random() * length)
    //   return array[randomIndex]
    // },

  }
}
</script>
<style lang="scss" scoped>
.barecharts {
  width: 100%;
  height: 400px;
}
</style>